<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Progress 进度条</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.pro500{
	margin-left: 20px;
	width: 500px;
}
.button-icon3{
	margin-left: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.button-icon3 > svg{
	width: 16px;
}
.marl > .ant-progress{
	margin-right: 12px;
}
.diy-pro > .ant-progress-steps-outer > .ant-progress-steps-item{
	/* margin-inline-end: 1px; */
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">进度条</a-divider><!-- =============================================================== -->
	<p class="desc">标准的进度条。</p>
	<div class="pro500">
		<a-progress :percent="30"></a-progress>
		<a-progress :percent="50" status="active"></a-progress>
		<a-progress :percent="70" status="exception"></a-progress>
		<a-progress :percent="100"></a-progress>
		<a-progress :percent="50" :show-info="false"></a-progress>
	</div>
	
	<a-divider class="a-divi" orientation="left">小型进度条</a-divider><!-- =============================================================== -->
	<p class="desc">适合放在较狭窄的区域内。</p>
	<div style="width: 170px;margin-left: 20px;">
		<a-progress :percent="30" size="small"></a-progress>
		<a-progress :percent="50" size="small" status="active"></a-progress>
		<a-progress :percent="70" size="small" status="exception"></a-progress>
		<a-progress :percent="100" size="small"></a-progress>
	</div>
	
	<a-divider class="a-divi" orientation="left">响应式进度圈</a-divider><!-- =============================================================== -->
	<p class="desc">响应式的圈形进度，当 width 小于等于 20 的时候，进度信息将不会显示在进度圈里面，而是以 Tooltip 的形式显示。</p>
	<div style="margin-left: 200px;">
		<a-progress type="circle" trail-color="#e6f4ff" :percent="60" :stroke-width="20" :size="12" :format="number => `进行中，已完成${number}%`"></a-progress>
		<span style="margin-left: 8px;">代码发布</span>
	</div>
	
	<a-divider class="a-divi" orientation="left">进度圈动态展示</a-divider><!-- =============================================================== -->
	<p class="desc">会动的进度条才是好进度条。</p>
	<div class="marl">
		<a-progress type="circle" :percent="defaultPercent1"></a-progress>
		<a-button-group>
			<a-button class="button-icon3" @click="decline1"><template #icon><minus-outlined></minus-outlined></template></a-button>
			<a-button class="button-icon3" @click="increase1"><template #icon><plus-outlined></plus-outlined></template></a-button>
		</a-button-group>
	</div>
	
	<a-divider class="a-divi" orientation="left">仪表盘</a-divider><!-- =============================================================== -->
	<p class="desc">通过设置 type=dashboard，可以很方便地实现仪表盘样式的进度条。若想要修改缺口的角度，可以设置 gapDegree 为你想要的值。</p>
	<p class="desc">gapDegree	仪表盘进度条缺口角度，可取值 0 ~ 295	number	默认75	-</p>
	<p class="desc">gapPosition	仪表盘进度条缺口位置	top | bottom | left | right	默认bottom	-</p>
	<p class="desc">strokeWidth	仪表盘进度条线的宽度，单位是进度条画布宽度的百分比	number	默认6	-</p>
	<div class="marl">
		<a-progress type="dashboard" :percent="75"></a-progress>
		<a-progress type="dashboard" :percent="75" gap-degree="120"></a-progress>
		<a-progress type="dashboard" :percent="75" gap-position="left"></a-progress>
		<a-progress type="dashboard" :percent="75" stroke-width="12"></a-progress>
	</div>
	
	<a-divider class="a-divi" orientation="left">圆角/方角边缘</a-divider><!-- =============================================================== -->
	<p class="desc">strokeLinecap="round | butt | square" 可以调整进度条边缘的形状。</p>
	<div class="pro500">
		<a-progress stroke-linecap="square" :percent="75"></a-progress>
		<a-progress stroke-linecap="square" :percent="75" type="circle"></a-progress>
		<a-progress stroke-linecap="round" :percent="75" type="dashboard"></a-progress>
	</div>
	
	<a-divider class="a-divi" orientation="left">步骤进度条</a-divider><!-- =============================================================== -->
	<p class="desc">带步骤的进度条。</p>
	<a-button-group>
		<a-button class="button-icon3" @click="decline2"><template #icon><minus-outlined></minus-outlined></template></a-button>
		<a-button class="button-icon3" @click="increase2"><template #icon><plus-outlined></plus-outlined></template></a-button>
	</a-button-group><br><br>
	<a-space direction="vertical" class="pro500">
		<a-progress :percent="defaultPercent2" :steps="3"></a-progress>
		<a-progress :percent="defaultPercent2" :steps="5"></a-progress>
		<a-progress :percent="defaultPercent2" :steps="5" size="small" stroke-color="#52c41a"></a-progress>
		<a-progress :percent="defaultPercent2" :steps="5" :stroke-color="['#52c41a', '#52c41a', '#f5222d']"></a-progress>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">进度圈</a-divider><!-- =============================================================== -->
	<p class="desc">圈形的进度。</p>
	<div class="marl">
		<a-progress type="circle" :percent="75"></a-progress>
		<a-progress type="circle" :percent="70" status="exception"></a-progress>
		<a-progress type="circle" :percent="100"></a-progress>
	</div>
	
	<a-divider class="a-divi" orientation="left">小型进度圈</a-divider><!-- =============================================================== -->
	<p class="desc">小一号的圈形进度</p>
	<div class="marl">
		<a-progress type="circle" :percent="30" :size="80"></a-progress>
		<a-progress type="circle" :percent="70" :size="80" status="exception"></a-progress>
		<a-progress type="circle" :percent="100" :size="80"></a-progress>
	</div>
	
	<a-divider class="a-divi" orientation="left">动态展示</a-divider><!-- =============================================================== -->
	<p class="desc">会动的进度条才是好进度条。</p>
	<a-progress :percent="defaultPercent3" class="pro500"></a-progress>
	<a-button-group>
		<a-button class="button-icon3" @click="decline3"><template #icon><minus-outlined></minus-outlined></template></a-button>
		<a-button class="button-icon3" @click="increase3"><template #icon><plus-outlined></plus-outlined></template></a-button>
	</a-button-group>
	
	<a-divider class="a-divi" orientation="left">自定义文字格式</a-divider><!-- =============================================================== -->
	<p class="desc">format 属性指定格式。</p>
	<div class="marl">
		<a-progress type="circle" :percent="75" :format="percent => `${percent} Days`"></a-progress>
		<a-progress type="circle" :percent="100" :format="() => 'Done'"></a-progress>
		<a-progress type="circle" :percent="75">
			<template #format="percent">
				<span style="color: red">{{ percent }}</span>
			</template>
		</a-progress>
	</div>
	
	<a-divider class="a-divi" orientation="left">分段进度条</a-divider><!-- =============================================================== -->
	<p class="desc">标准的进度条。拓展，用steps，可实现多段色效果</p>
	<div class="marl pro500">
		<a-tooltip title="3已完成 / 3进行中 / 4待完成">
			<a-progress :percent="100" :success="{percent: 30, strokeColor: '#f00'}"></a-progress>
		</a-tooltip>
		<a-tooltip title="这个就是自己研究出来的（中间的间隙还可以去掉）" class="diy-pro">
			<a-progress :percent="99" :steps="10" :size="[50, 10]" :stroke-color="stroke_color"></a-progress>
		</a-tooltip>
		<a-tooltip title="3已完成 / 3进行中 / 4待完成">
			<a-progress :percent="60" :success="{ percent: 30 }" type="circle"></a-progress>
		</a-tooltip>
		<a-tooltip title="3已完成 / 3进行中 / 4待完成">
			<a-progress :percent="90" :success="{ percent: 30 }" type="dashboard"></a-progress>
		</a-tooltip>
	</div>
	
	<a-divider class="a-divi" orientation="left">自定义进度条渐变色</a-divider><!-- =============================================================== -->
	<p class="desc">linear-gradient 的封装。推荐只传两种颜色。（实测可以传多种颜色）</p>
	<div class="marl pro500">
		<a-progress :stroke-color="{from: '#108ee9',to: '#87d068',}" :percent="99.9"></a-progress>
		<a-progress :stroke-color="{'0%': '#108ee9','100%': '#87d068',}" :percent="99.9"></a-progress>
		<a-progress :stroke-color="{'0%': '#108ee9','20%': '#87d068','40%': '#f00','60%': '#0f0','80%': '#00f','100%': '#000'}" :percent="29.9"></a-progress>
		<a-progress :stroke-color="{'0%': '#108ee9','100%': '#87d068',}" :percent="90" type="circle"></a-progress>
		<a-progress :stroke-color="{'0%': '#108ee9','100%': '#87d068',}" :percent="100" type="circle"></a-progress>
	</div>
	
	<a-divider class="a-divi" orientation="left">进度条尺寸</a-divider><!-- =============================================================== -->
	<p class="desc">进度条尺寸。</p>
	<div class="marl pro500">
		<a-space direction="vertical" style="width: 100%;">
			<a-progress :percent="50"></a-progress>
			<a-progress :percent="50" size="small"></a-progress>
			<a-progress :percent="50" :size="[300, 20]"></a-progress>
		</a-space>
		<br />
		<br />
		<a-space :size="30">
			<a-progress type="circle" :percent="50"></a-progress>
			<a-progress type="circle" :percent="50" size="small"></a-progress>
			<a-progress type="circle" :percent="50" :size="20"></a-progress>
		</a-space>
		<br />
		<br />
		<a-space :size="30">
			<a-progress type="dashboard" :percent="50"></a-progress>
			<a-progress type="dashboard" :percent="50" size="small"></a-progress>
			<a-progress type="dashboard" :percent="50" :size="20"></a-progress>
		</a-space>
		<br />
		<br />
		<a-space :size="30">
			<a-progress :steps="3" :percent="50"></a-progress>
			<a-progress :steps="3" :percent="50" size="small"></a-progress>
			<a-progress :steps="3" :percent="50" :size="20"></a-progress>
			<a-progress :steps="3" :percent="50" :size="[20, 30]"></a-progress>
			<a-progress :steps="3" :percent="50" :size="[120, 10]"></a-progress>
		</a-space>
	</div>
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		defaultPercent1: 0,
		defaultPercent2: 30,
		defaultPercent3: 30,
		stroke_color: [
			'#f00',
			'#e20',
			'#d40',
			'#c60',
			'#a80',
			'#8a0',
			'#6c0',
			'#4d0',
			'#2e0',
			'#0f0',
		],
		
		
	}
},
methods:{
	increase1(){
		const percent = this.defaultPercent1 + 10;
		this.defaultPercent1 = percent > 100 ? 100 : percent;
	},
	decline1(){
		const percent = this.defaultPercent1 - 10;
		this.defaultPercent1 = percent < 0 ? 0 : percent;
	},
	
	increase2(){
		const percent = this.defaultPercent2 + 10;
		this.defaultPercent2 = percent > 100 ? 100 : percent;
	},
	decline2(){
		const percent = this.defaultPercent2 - 10;
		this.defaultPercent2 = percent < 0 ? 0 : percent;
	},
	
	increase3(){
		const percent = this.defaultPercent3 + 10;
		this.defaultPercent3 = percent > 100 ? 100 : percent;
	},
	decline3(){
		const percent = this.defaultPercent3 - 10;
		this.defaultPercent3 = percent < 0 ? 0 : percent;
	},
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
